<template>
    <view class="goods-inner bg-white baseA">
		<u-icon name="close" class="close" @tap="hide"></u-icon>
		<scroll-view class="goods-box" scroll-y="true">
			<view class="goods-item u-flex" v-for="(goods, index) in goodsList">
				<view class="goods-img">
					<image :src="baseUrl+goods.goods_img" mode="scaleToFill"></image>
					<view v-if="goods.goods_num <= 0" class="sold-out u-flex u-col-center">
						<u-divider color="#fff" border-color="#fff" bg-color="transparent">已抢光</u-divider>
					</view>
					<view v-if="goods.is_explain == 1" class="explaining">讲解中</view>
				</view>
				<view class="u-p-l-20 u-flex-1">
					<view class="goods-content">
						<view class="goods-name u-line-2">{{goods.goods_name}}</view>
						<view class="goods-price">
							<view class="u-flex u-row-between">
								<view v-if="goods.price_type == 1" class="price u-flex-1 price-color">
									<text class="fs24">¥</text>
									<text class="fs36">{{goods.price}}</text>
								</view>
								<view v-if="goods.price_type == 2" class="price u-flex-1 price-color">
									<text class="fs24">¥</text>
									<text class="fs36">{{goods.price}}~</text>
									<text class="fs24">¥</text>
									<text class="fs36">{{goods.price2}}</text>
								</view>
								<view v-if="goods.price_type == 3" class="price u-flex-1 price-color">
									<text class="fs24 u-m-r-10">折扣</text>
									<text class="fs24">¥</text>
									<text class="fs36">{{goods.price2}}</text>
									<text class="fs24 color-99 u-m-l-20"><del>¥{{goods.price}}</del></text>
								</view>
								<u-icon v-if="goods.goods_num > 0 && goods.is_cart == 1" @click="toggleSpec(goods)" name="shopping-cart" size="42" color="#5CB61A"></u-icon>
								<view class="buy u-m-l-20">
									<u-button size="mini" 
										hover-class="none"
										shape="circle"
										@click="app.goPage('/pages/shop/goods/info?goods_id='+goods.goods_id+'&roomid='+roomid)"
										:disabled="goods.goods_num <= 0"
										class="defaultbtn buy-btn"
									>去购买</u-button>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</scroll-view>
		
		<goodsSpec @selectSpec="selectSpec" 
			@toggleSpec="toggleSpec" 
			:specClass="specClass" 
			:specSelected="specSelected"
			:selectGoods="selectGoods" 
			:selectGoodsPrice="selectGoodsPrice" 
			:selectGoodSmarketPrice="selectGoodSmarketPrice"
			:selectGoodsNumber="selectGoodsNumber" 
			:selectGoodsImg="selectGoodsImg" 
			:specList="specList" 
			:roomid="roomid" 
			:specChildList="specChildList"
			:selectSkuId="selectSkuId" ></goodsSpec>
    </view>
</template>

<script>
	import goodsSpec from '@/pages/shop/goods/spec';
	
    export default{
		components: {
			goodsSpec
		},
        props: {
            goodsList:{},
			roomid: {
				type: Number,
				default: 0,
			}
        },
        data() {
			return {
				baseUrl: this.config.baseUrl,
				specClass: 'none',
				specSelected: [],
				specList: [],
				specChildList: [],
				selectGoods: {}, //选择的商品
				selectGoodsId:0,
				selectSkuId:0,
				selectGoodsPrice: '0.00',
				selectGoodSmarketPrice: '0.00',
				selectGoodsNumber: 0,
				selectGoodsImg: '',
			}
		},
        methods: {
            hide() {
				console.log('hidegoods')
                this.$emit('hidegoods')
            },
			//规格弹窗开关
			toggleSpec(selGoods) {
				if (this.specClass === 'show') {
					this.getCartNum = 1;
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					if (this.selectGoodsId == selGoods.goods_id){
						this.specClass = 'show';
						this.showSelectSpec();
						return false;
					}
					this.selectGoodsId = selGoods.goods_id;
					this.getCartNum = 0;
					this.specSelected = [];
					this.selectGoodsImg = this.config.baseUrl + selGoods.goods_img;
					this.selectGoodsPrice = selGoods.sale_price;
					if (selGoods.is_spec == 0) { //单规格
						this.selectGoods = selGoods;
						this.selectGoodsPrice = selGoods.price_type == 3 ? selGoods.price2 : selGoods.price;
						this.selectGoodSmarketPrice = selGoods.price;
						this.selectGoodsNumber = selGoods.goods_num;
						this.specList = [];
						this.specChildList = [];
						this.specClass = 'show';
						return false;
					}
					this.$u.post('shop/api.goods/getGoodsInfo', {
						'goods_id': selGoods.goods_id
					}).then(res => {
						this.selectGoods = res.data;
						this.specList = res.data.specList;
						this.specChildList = res.data.specChildList;
						this.specClass = 'show';
						this.specSelected = [];
						this.showSelectSpec();
					})
			
			
				}
			},
			//选择规格
			selectSpec(list) {
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				})
				this.showSelectSpec();
			},
			showSelectSpec() {
				let that = this;
				this.selectSkuId = 0;
				let selSkuArr = [];
				this.specSelected.forEach(item => {
					selSkuArr.push(item.id);
				})
				let selSku = selSkuArr.join(":");
				Object.keys(this.selectGoods.sub_goods).forEach(sku_id => {
					let item = this.selectGoods.sub_goods[sku_id];
					if (selSku == item.sku_val) {
						if (item.sale_price > 0){
							this.selectSkuId = parseInt(sku_id);
							this.selectGoodsPrice = item.sale_price;
							this.selectGoodSmarketPrice = item.market_price;
							this.selectGoodsNumber = item.goods_number;
						}
						return false;
					}
				})
				if (this.selectSkuId < 1){
					this.selectGoodsImg = this.config.baseUrl + this.selectGoods.goods_thumb;
					return false;
				}
				this.selectGoods.imgSkuList.forEach(item => {
					if (selSku == item.sku_val) {
						this.selectGoodsImg = this.config.baseUrl + item.goods_thumb;
						return false;
					}
				})
				if (this.selectGoodsImg == '') {
					this.selectGoods.imgSkuList.forEach(item => {
						let _sku = item.sku_val.split(':');
						if (selSkuArr[0] == _sku[0]) {
							this.selectGoodsImg = this.config.baseUrl + item.goods_thumb;
							return false;
						}
					})
				}
			},
        },
        computed: {}
    }
</script>
<style lang="scss">
    .goods-inner {
        padding: 60rpx 20rpx 0;
        position: absolute;
        width: 100%;
		height: 100%;
        box-sizing: border-box;
		border-radius: 40rpx 40rpx 0px 0px;
		overflow: hidden;
    }
    .goods-title {
        height: 114rpx;
        line-height: 114rpx;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #111111;
        letter-spacing: 0;
        text-align: left;
        display: block;
        border-bottom: 1px solid #DBDBDB;
    }
    .close {
        height: 64rpx;
        width: 64rpx;
        position: absolute;
        right: 10rpx;
        top: 2rpx;
		z-index: 999;
    }
    .goods-item {
        border-bottom: 1px solid #f0f0f5;
        position: relative;
		padding: 30rpx 0;
		&:first-child{
			padding-top: 0;
		}
    }
    .goods-item:last-child {
      border: none;
    }
    .goods-box {
        height: 100%;
    }
    .goods-item-img {
        width: 84rpx;
        height: 171rpx;
        margin-top: 24rpx;
    }
    .goods-info {
        display: inline-block;
        vertical-align: middle;
        padding-left: 24rpx;
    }
	.goods-content{
		height: 168rpx;
		position: relative;
		
		.goods-price{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}
	}
    .goods-img {
        height: 168rpx;
        width: 168rpx;
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
		
		image{
			width: 100%;
			height: 100%;
		}
		.sold-out{
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .6);
			padding: 0 15rpx;
		}
		.explaining{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 44rpx;
			line-height: 44rpx;
			background: rgba(244, 41, 52, .6);
			text-align: center;
			color: #fff;
			font-size: 24rpx;
		}
    }
    .name {
        height: 110rpx;
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        line-height: 30rpx;
    }
    .price {
        height: 30rpx;
        line-height: 30rpx;
        font-size: 14px;
        color: #EE4E4E;
    }
    .cart{
        position: absolute;
        right: 24rpx;
        width: 36rpx;
        height: 36rpx;
        bottom: 28rpx;
    }
	.buy-btn{
		padding: 10rpx 20rpx;
		&[disabled="true"]{
			background: #999 !important;
		}
	}
</style>